<template>
    <fieldset>
        <legend>app</legend>
        <inputs @add="adds"></inputs>
        <show :arr="bbb" @del="del" @get="che" :a='a' :b="b" :c="c"></show>
    </fieldset>
</template>
<script setup>
    import {ref,onMounted,computed} from 'vue'
    import inputs from './inputs.vue'
    import show from './show.vue'

    let arr =ref([])
    let adds = function(input){
        arr.value.unshift({
            name:input,
            id:Math.random().toString(32).substring(2),
            shifou:false
        })
        localStorage.setItem('set',JSON.stringify(arr.value))
    }

    let del = function(a){
        // console.log(a);
        arr.value=arr.value.filter(item=>item.id!==a.id)
        localStorage.setItem('set',JSON.stringify(arr.value))
    }
    let aaa = ref('all')
    let che = function(input){
        aaa.value = input
        console.log(input);
    }
    let a= ref(0)
    let b= ref(0)
    let c= ref(0)
    let bbb = computed(()=>{
        let allcount = arr.value;
        let finishcount = arr.value.filter(item=>item.shifou);
        let unfinishcount = arr.value.filter(item=>!item.shifou)
        a.value = allcount.length
        b.value = finishcount.length
        c.value = unfinishcount.length
        // console.log(arr.value);
        switch(aaa.value){
            case 'all':
                return allcount;
            case 'finish':
                return finishcount;
            case 'unfinish':
                return unfinishcount
        }
    })
    onMounted(()=>{
        if(localStorage.getItem('set')){
            arr.value = JSON.parse(localStorage.getItem('set'))
        }
    })
</script>